<template>
	<view>
		<view class='Popup' v-if='isShowAuth'>
			<view class="main-msg">
				<view class='title'>用户协议及隐私条款</view>
				<view class='tip'>感谢您使用助融报告，我们非常重视您的个人信息和隐私保护。为了更好地保障您的个人权益，您在使用我们的产品前，请您阅读并充分理解相关条款。</view>
				<view style="padding: 0 30rpx;">
					<text style="color: #000; font-weight: bold;">如您同意</text>
					<text style="font-size: 28rpx; color: #007AFF;" @click="linkPrivacy(0)">《用户服务协议》</text>
					<text style="color: #000; font-weight: bold;">和</text>
					<text style="font-size: 28rpx; color: #007AFF;" @click="linkPrivacy(1)">《隐私政策》</text>
					<text style="color: #000; font-weight: bold;">请点击“授权”开始使用我们的产品和服务</text>
				</view>

			</view>
			<view class='bottom flex'>
				<view class='item leftBottom' @click='close'>拒绝</view>

				<!-- #ifdef MP-WEIXIN -->
				<button class='grant' type="primary" open-type="getPhoneNumber" lang="zh_CN"
					@getphonenumber="getphonenumber">授权</button>
				<!-- <button v-else class=" grant" @click="checked()">去授权</button> -->
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS || MP-TOUTIAO -->
				<button class='grant' type="primary" @click="goLogin">去登录</button>
				<!-- #endif -->
			</view>
		</view>
		<view class='mask' v-if='isShowAuth'></view>
	</view>
</template>

<script>
const app = getApp();
import {
	mapGetters
} from 'vuex';
import Routine from '../libs/routine';
export default {
	name: 'Authorize',
	props: {
		isGoIndex: {
			type: Boolean,
			default: true
		},
		isShowAuth: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isChecked: false,
			// #ifdef H5 
			isweixin: Routine.isWeixin(),
			// #endif
			code: '',
		}
	},
	computed: mapGetters(['isLogin', 'userInfo']),
	watch: {
		isLogin(n) {
			// n === true && this.$emit('onLoadFun', this.userInfo);
		}
	},
	created() { },
	methods: {
		linkPrivacy(type) {
			uni.navigateTo({
				url: '/pages/privacy/index?privacyType=' + type
			})
		},
		checked() {
			if (!this.isChecked) {
				return this.$util.Tips('请同意隐私协议政策')
			}
		},
		getphonenumber(e) {
			//todo 使用 e 去判断是否授权
			// #ifdef MP-WEIXIN
			let detail = e.detail.errMsg.split(':')[1]
			if (detail !== 'ok') {
				this.$util.Tips('已取消授权')
			} else {
				uni.showLoading({
					title: '正在登录中'
				});
				Routine.getCode().then(code => {
					this.loginUser(code, e.detail)
				}).catch(err => {
					uni.hideLoading();
				}).finally(() => {
					uni.hideLoading();
				})
			}
			// #endif
			// #ifdef MP-TOUTIAO
			uni.showLoading({
				title: '正在登录中'
			});
			Routine.getCode().then(code => {
				this.loginUser(code, e.detail)
			}).catch(err => {
				uni.hideLoading();
			}).finally(() => {
				uni.hideLoading();
			})
			// #endif

			let paramsPageClick = {
				Um_Key_ButtonName: '去授权',
				Um_Key_SourcePage: `登录弹框`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		loginUser(code, data) {
			let that = this
			Routine.authUserInfo(code, data).then(res => {
				this.$util.Tips('登录成功')
				uni.hideLoading();
				this.close()
				this.$emit('onLoadFun', res)
				this.$umaTrack.loginTrack()
			}).catch(e => {
				that.close()
				setTimeout(() => {
					that.$util.Tips(e)
				}, 500)
				uni.hideLoading();
			}).finally(() => {
				uni.hideLoading();
			})
		},
		close() {
			// let par = Cache.get('params') && JSON.parse(Cache.get('params'))
			// if (par?.spreadUid) {
			// 	delete par.spreadUid
			// 	Cache.set("params", par);
			// }
			this.$emit('authColse')
			let paramsPageClick = {
				Um_Key_ButtonName: '随便逛逛',
				Um_Key_SourcePage: `登录弹框`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		// h5 去登录
		async goLogin() {

			setTimeout(() => {
				uni.navigateTo({
					url: '/pagesWater/users/login'
				})
			}, 100)
		}
	}
}
</script>

<style scoped lang='scss'>
.Popup {
	width: 500rpx;
	background-color: #fff;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -250rpx;
	transform: translateY(-50%);
	z-index: 10000000;
	border-radius: 30rpx;

}




.Popup .title {
	font-weight: 600;
	font-size: 34rpx;
	color: #333333;
	text-align: center;
	margin-top: 30rpx;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #eee;
}

.Popup .tip {
	font-size: 28rpx;
	color: #999;
	padding: 0 24rpx;
	line-height: 40rpx;
	margin-top: 25rpx;
}

.Popup .bottom {
	padding: 30rpx;
}

.Popup .leftBottom {
	background: #F6F9F8;
	border-radius: 6rpx !important;
	border: 1rpx solid #D7D7D7;
	font-size: 32rpx !important;
}

.Popup .bottom .item {
	width: 48%;
	height: 70rpx;
	background-color: #eeeeee;
	text-align: center;
	line-height: 70rpx;
	font-size: 24rpx;
	color: #666;
	/* margin-top: 54rpx; */
	border-radius: 40rpx;
	overflow: hidden;
	/* margin-right: 30rpx; */
}

.Popup .bottom .item.on {
	width: 100%
}

.flex {
	display: flex;
}

.Popup .bottom .grant {
	width: 48%;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 32rpx;
	color: #fff;
	font-weight: bold;
	background: #276FF7;
	border-radius: 6rpx;
	border: 1rpx solid #276FF7;
	overflow: hidden;
	padding: 0;
}

.mask {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.65);
	z-index: 310;
}

.Popup .arrge-box {
	font-size: 24rpx;
	color: #555;
	padding: 0 24rpx;
	margin-top: 25rpx;
	display: flex;

	/* align-items: center; */
	radio-group,
	checkbox-group {
		width: auto;
	}
}

.Popup .ys {
	margin-left: -5rpx;
	font-size: 28rpx;
	color: #007AFF;
	display: flex;

	>text {
		/* display: inline-block; */
	}
}
</style>